<template>
  <el-container class="container">
    <el-header class="header">
      <el-row>
        <el-col :span="16" class="headerlogo">
          <div class="grid-content bg-purple">
            <span>学生管理系统</span>
          </div>
        </el-col>
        <el-col :span="8" class="rightsection">
          <div class="grid-content bg-purple-light">
            <span class="el-dropdown-link userinfo-inner">欢迎您，管理员</span>
            <span class="userinfo-inner" @click="signout">退出</span>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside class="aside">
        <!-- 侧边栏导航  -->
        <!-- unique-opened只展开一个 -->
        <!-- router开启路由模式 -->
        <el-menu :unique-opened="false" :router="true" class="menu"
                 background-color=" #3A3A3A"
                 text-color="#fff" active-text-color="#ffd04b">
          <el-submenu :index="item1.path" v-for="(item1,index) in menuData" :key="item1.path">
            <!--表示可以展开的一组 -->
            <template slot="title">
              <!--文字 -->
              <span>{{item1.name}}</span>
            </template>
            <el-menu-item
              class="menuItem"
              @click="clickMenuItem"
              v-for="(item2,index) in item1.children"
              :key="item2.path"
              :index="item2.path">
              <span>{{item2.name}}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <main class="main">
        <router-view></router-view>
      </main>
    </el-container>
  </el-container>

</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      menuData: [
        {
          name: "学生管理",
          order: "1",
          path:'/test1',
          children: [
            {
              path: "/test1",
              name: "学生信息",
            },
          ],
        },
        {
          path: "/test2",
          name: "饭卡管理",
          order: "2",
          children: [
            {
              path: "/test2",
              name: "饭卡信息",
            },
          ],
        },
      ],
    };
  },
  methods:{
    clickTitle(){

    },

    clickMenuItem(){
      let state = this.$store.state.ui.isLoading;
      if(state){
        this.$store.state.ui.startLoading(false)
      }
      console.log("----2-------"+JSON.stringify(this.$store.state.ui.isLoading));
    },
    //退出
    signout() {
      this.$confirm("退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$store.commit('startLoading',true)
        this.$router.push({ path: "/HelloWorld" });
      });
    },
  }
}
</script>

<style scoped>
  .container {
    height: 100vh;
    font-size: 15px;
  }
  .header {
    background: #212121;
    color: #fff;
  }
  .aside {
    background: #3a3a3a;
    color: #fff;
    /* height: 100%; */
  }
  .main {
    /* height: 100%; */
    color: #212121;
  }
  .headerlogo {
    line-height: 60px;
    margin-top: 10px;
  }
  .rightsection {
    line-height: 60px;
    text-align: center;
  }
</style>
